<!--
 * @Description: useInfiniteScroll（无限滚动）
 * @Author: r_yuesheng
 * @Date: 2022-12-23 16:33:51
 * @LastEditTime: 2022-12-29 17:06:21
 * @LastEditors: r_yuesheng
-->
<template>
  <div class="flex">
    <div>
      <h3>引用core方法</h3>
      <div ref="scrollDiv" class="h300 w300 overflowY-auto" style="background: beige;">
        <div v-for="item in listData" :key="item" class="h30 p10">
          {{item}}
        </div>
      </div>
    </div>
    <div class="ml54">
      <h3>引用组件</h3>
      <div>
        <div v-infinite-scroll="onLoadMore" class="h300 w300 overflowY-auto" style="background: blanchedalmond;">
          <div v-for="item in listDataTwo" :key="item" class="h30 p10">
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive, toRefs } from 'vue';
import { useInfiniteScroll } from '@vueuse/core';
import { vInfiniteScroll } from '@vueuse/components';
export default {
  name: '',
  props: {},
  components: { vInfiniteScroll },
  setup(props, { emit }) {
    const { proxy } = getCurrentInstance();
    function initState() {
      return {
        listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
        listDataTwo: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
      };
    }
    const state = reactive(initState());
    onMounted(() => {
      useInfiniteScroll(
        proxy.$refs.scrollDiv,
        () => {
          const length = state.listData.length + 1;
          state.listData.push(...Array.from({ length: 5 }, (_, i) => length + i));
        },
        { distance: 10 }
      );
    });
    function onLoadMore() {
      const length = state.listDataTwo.length + 1;
      state.listDataTwo.push(...Array.from({ length: 5 }, (_, i) => length + i));
    }
    return {
      ...toRefs(state),
      onLoadMore,
    };
  },
};
</script>